<template>
	<view>
		<view>
			<image style="width: 750rpx;height: 507rpx;" mode="aspectFill" :src="imgUrl + 'dianpu-beijin.png'"></image>
		</view>
		
		<view class="top-box">
			<view style="display: flex;align-items: center;justify-content: center;flex-direction: column;transform: translateY(-50rpx);">
				<view>
					<image mode="aspectFill" style="width: 100rpx;height: 100rpx;border-radius: 50%;" :src="imgUrl + 'dianpu-logo.png'"></image>
				</view>
				
				<view style="font-size: 34rpx;font-weight: 600;padding-top: 30rpx;">
					校园快洗天河店
				</view>
				<view style="font-size: 24rpx;color: #A7A7A7;padding-top: 10rpx;">
					营业时间：周一至周日  08:00-20:00
				</view>
			</view>
			
		</view>
		
		<view style="display: flex;justify-content: space-between;padding: 0rpx 30rpx;">
			<view style="display: flex;align-items: center;">
				<image style="width: 44rpx;height: 43rpx;" :src="imgUrl + 'dianpu-address.png'"></image>
				<view style="font-size: 30rpx;color: #323232;padding-left: 23rpx;width: 500rpx;overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">
					广东省广州市白云区联富大厦9018
				</view>
			</view>
			
			<view style="border-left: 1rpx solid rgba(167,167,167,.5);">
				<image style="width: 40rpx;height: 40rpx;margin-left: 20rpx;" :src="imgUrl + 'dianpu-phone.png'"></image>
			</view>
		</view>
		
		
		<view class="title">
			附近门店
		</view>
		<view style="padding-bottom: 120rpx;">
			<view v-if="shopArr.length>0" @click="shopdetail(it,i)" class="shop-list" v-for="(it,i) in 10" :key="i">
				<view class="shop-img-box">
					<image class="shop-img" src="../../../static/logo.png"></image>
				</view>
				<view style="height: 220rpx;width: 100%;">
					<view style="display: flex;align-items: center;justify-content: space-between;">
						<view style="font-size: 32rpx;color: #323232;font-weight: 600;width: 300rpx;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
							校园快洗天河店
						</view>
						<view style="font-size: 26rpx;color: #323232;">
							1.8km
						</view>
					</view>
					<view style="font-size: 24rpx;color: #A8A8A8;padding-top: 20rpx;">
						营业时间：08:00-20:00
					</view>
					<view class="shop-but">
						立即预约
					</view>
					<view style="font-size: 24rpx;color: #A8A8A8;padding-top: 10rpx;display: flex;justify-content: flex-end;">
						<view style="width: 300rpx;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
							广州市白云区齐富路1-10号联富大厦
						</view>
						<text>></text>
					</view>
				</view>
			</view>
		</view>
		
		
		
		<view class="but">
			会员免费预约
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				imgUrl: 'https://syxiyi.oss-cn-shenzhen.aliyuncs.com/frontend/img/',
				shopArr:[{}]
			}
		},
		onLoad() {
			
		},
		methods: {
			shopdetail(it, i) {
				uni.navigateTo({
					url:'/pages/index/shopdetail/index?id=' + it.id
				})
			}
		}
	}
</script>

<style>
	.but{
		position: fixed;
		bottom: 30rpx;
		width: 690rpx;
		left: 30rpx;
		padding: 20rpx 0rpx 20rpx 0rpx;
		text-align: center;
		font-size: 30rpx;
		background: linear-gradient(-17deg, rgba(255, 114, 59, 1), rgba(255, 147, 67, 1));
		color: white;
		border-radius: 40rpx;
	}
	.title{
		padding: 50rpx 30rpx 20rpx 30rpx;
		font-weight: 600;
		font-size: 36rpx;
		color: #323232;
	}
	.top-box{
		width: 690rpx;
		margin-left: 30rpx;
		height:210rpx;
		background:rgba(255,255,255,1);
		box-shadow:0px 3rpx 20rpx 0px rgba(228,228,228,0.39);
		border-radius:20rpx;
		transform: translateY(-50rpx);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.shop-img-top{
		width: 158rpx;
		height: 40rpx;
		position: absolute;
		z-index: 10;
		top: 0rpx;
		left: 0rpx;
	}
	.shop-but{
		color: white;
		font-size: 22rpx;
		text-align: center;
		line-height: 48rpx;
		margin-top: 38rpx;
		width:128rpx;
		height:48rpx;
		background:#FF723B;
		border-radius:10rpx;
	}
	.shop-img-box{
		margin-right: 20rpx;
		width: 220rpx;
		height: 220rpx;
		position: relative;
	}
	.shop-img{
		width: 220rpx;
		height: 220rpx;
		/* position: absolute; */
	}
	.shop-list{
		width: 690rpx;
		margin-left: 30rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #F1F1F1;
		display: flex;
		align-items: center;
	}
	
</style>
